<template>
    <div class="text-container">
        <span class="text">{{ text }}</span>
    </div>
</template>

<script setup>
const props = defineProps({
    text: {
        type: String,
        required: true
    }
});

</script>

<style>
.text-container {
    /* 设置容器样式，例如大小和位置 */
    position: relative;
    width: 100px;
    height: 100px;
}

.text {
    /* 设置文字样式，例如字体、大小和颜色 */
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #333;
    /* 使用绝对定位将文字放置在容器中间 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 创建2D效果 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>